<template>
  <div>
    <el-row class="text-center mt-[20px]">
      <el-col :span="8">
        <div class="cj_tj_name">
          公差限
          <el-icon style="margin-left: 4px" :size="16" class="red_text">
            <Coin />
          </el-icon>
        </div>
        <div class="cj_tj_value">
          {{ params?.lowerLimitValue_error || "" }}~{{
            params?.upperLimitValue_error || ""
          }}
        </div>
      </el-col>
      <el-col :span="8">
        <div class="cj_tj_name">
          控制限
          <el-icon style="margin-left: 4px" :size="16" class="yellow_text">
            <Coin />
          </el-icon>
        </div>
        <div class="cj_tj_value">
          {{ params.lowerLimitValue_warning ?? "" }}~{{
            params.upperLimitValue_warning ?? ""
          }}
        </div>
      </el-col>
      <el-col :span="8">
        <!-- 控制计划抽检/100%检测 -->
        <div class="cj_tj_name">送检频度</div>
        <div class="cj_tj_value">{{ params.samplingTypeName ?? "" }}</div>
      </el-col>
    </el-row>
    <div>
      <div class="flex items-center justify-between cj_title">
        <span>分析描述及解决方法</span>
        <span
          >状态：{{
            useDictionary("CheckOrderStatus", params.workOrderStatus) || ""
          }}
        </span>
      </div>
      <div class="cj_result">
        {{ params.workOrderResult || "暂无数据" }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useDictionary } from "@/utils/useTable"; // 引入
import { Coin } from "@element-plus/icons-vue";
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "1";
    },
  },
  // 整体曲线描述
  params: {
    type: Object,
    default: () => {
      return {
        id: "2323232323",
        standardName: "Journal C-Diameter (bottom)",
        upperLimitValue_error: 515.1,
        lowerLimitValue_error: 280,
        lowerLimitValue_warning: 290.2,
        upperLimitValue_warning: 490,
        standardValue: 350,
        collectionCount: [],
        collectionTimes: [],
        parameterValues: [],
        samplingTypeName: "100%检测",
        workOrderStatus: "1",
        workOrderResult:
          "字符数使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limit 到true 来显示剩余字数。 使用 maxlength 和 minlength 属性,来控制输入内容的最大字数和最小字数。字符数使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limit 到true 来显示剩余字数。",
      };
    },
  },
});
const { params } = toRefs(props);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.cj_title {
  margin-top: 28px;
  font-size: 14px;
}
.cj_result {
  line-height: 24px;
  color: #838a9d;
  overflow-y: auto;
  margin-top: 5px;
  width: 100%;
  height: 190px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  border: none;
}

.cj_tj_name {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  color: #606266;
  line-height: 20px;
  margin-bottom: 4px;
}
.cj_tj_value {
  font-family: DINAlt;
  font-weight: 400;
  font-size: 20px;
  color: #303133;
}
</style>
